import React, { useState } from'react';
import { NavBar, Image, Rate, Tabs, Grid, Button } from 'antd-mobile';
import { LeftOutline, StarOutline, StarFill } from 'antd-mobile-icons';
import { useNavigate, useParams } from 'react-router-dom';
import '../styles/doctorDetail.scss'

// 患者评价接口
interface PatientReview {
  id: string;
  name: string;
  gender: '男' | '女';
  age: number;
  content: string;
  rating: number;
  date: string;
}

const DoctorDetailPage: React.FC = () => {
  const navigate = useNavigate();
  const { id } = useParams<{ id: string }>();
  const [isFavorite, setIsFavorite] = useState(false);
  const [activeTab, setActiveTab] = useState('info');

  // 模拟的医生数据
  const doctor = {
    id: '1',
    name: '张医生',
    title: '主任医师',
    department: '心内科',
    hospital: '协和医院',
    rating: 4.8,
    ratingCount: 12354,
    expertise: '擅长各种心血管疾病的诊断与治疗，特别是冠心病、高血压、心力衰竭、心律失常等心血管疾病的诊治。尤其在复杂心血管疾病的诊断和治疗方面有丰富的临床经验。',
    fee: 150,
    schedule: [
      { day: '今天', availabel: false },
      { day: '明天', availabel: true },
      { day: '周三', availabel: true },
    ]
  }

  // 模拟的患者评价数据
  const reviews: PatientReview[] = [
    {
      id: '1',
      name: '张三',
      gender: '男',
      age: 32,
      content: '医生非常专业，态度也很好，解释得很清楚，让我对自己的病情有了更深入的了解，治疗效果也很明显。',
      rating: 5,
      date: '2023-07-15'
    },
    {
      id: '2',
      name: '王五',
      gender: '女',
      age: 45,
      content: '医生很有耐心，细致地询问了我的症状和病史，诊断很准确，开的药也很有效。',
      rating: 5,
      date: '2023-07-10'
    }
  ]

  const toggleFavorite = () => {
    setIsFavorite(!isFavorite);
  }

  const handleBack = () => {
    navigate('/doctors/心内科'); // 返回对应科室的医生列表
  }

  const handleCall = () => {
    console.log("联系电话")
  }

  const handleConsult = () => {
    console.log("在线咨询")
  }

  const handleShare = () => {
    console.log("分享")
  }

  const handleBooking = () => {
    console.log("立即预约")
    navigate(`/booking/confirm/${id}`); // 导航到预约确认页面
  }

  // 渲染出诊时间选择
  const renderSchedule = () => {
    return (
      <div className="schedule-section">
        <h3 className="section-title">出诊时间</h3>
        <Grid columns={3} gap={8}>
          {doctor.schedule.map((slot, index) => (
            <Grid.Item key={index}>
              <div className={`schedule-item ${slot.availabel ? 'available' : 'unavailable'}`}>
                <div className="day">{slot.day}</div>
                <div className="status">{slot.availabel ? '可预约' : '已满'}</div>
              </div>
            </Grid.Item>
          ))}
        </Grid>
        <div className="schedule-pagination">
          <span className="prev-arrow">◄</span>
          <div className="pagination-indicator"></div>
          <span className="next-arrow">►</span>
        </div>
      </div>
    )
  }

  // 渲染患者评价
  const renderReviews = () => {
    return (
      <div className="reviews-section">
        <div className="reviews-header">
          <h3 className="section-title">患者评价</h3>
          <span className="reviews-count">全部 {reviews.length > 0 ? reviews.length : 0}</span>
        </div>

        {reviews.length > 0 ? (
          <div className="reviews-list">
            {reviews.map(review => (
              <div className="review-item" key={review.id}>
                <div className="review-header">
                  <div className="reviewer-info">
                    <span className="reviewer-name">{review.name}</span>
                    <span className="reviewer-detail">{`(${review.gender}, ${review.age}岁)`}</span>
                  </div>
                  <div className="review-date">{review.date}</div>
                </div>
                <div className="review-rating">
                  <Rate readOnly value={review.rating} />
                </div>
                <div className="review-content">{review.content}</div>
              </div>
            ))}
          </div>
        ) : (
          <div className="no-reviews">暂无评价</div>
        )}
      </div>
    )
  }

  return (
    <div className="doctor-detail-page">
      <NavBar
        className='nav-bar'
        backArrow={<LeftOutline />}
        onBack={handleBack}
        right={
          <div className="favorite-icon" onClick={toggleFavorite}>
            {isFavorite ? <StarFill color="#ffc53d" /> : <StarOutline />}
          </div>
        }
      >医生详情</NavBar>

      {/* 医生基本信息 */}
      <div className="doctor-basic-info">
        <div className="doctor-header">
          <div className="doctor-avatar">
            <Image
              src="https://via.placeholder.com/80"
              width={80}
              height={80}
              fit="cover"
              placeholder=""
              alt={doctor.name}
            />
          </div>
          <div className="doctor-profile">
            <h2 className="coctor-name">{doctor.name}</h2>
            <div className="doctor-title">{doctor.title} | {doctor.department}</div>
            <div className="doctor-hospital">{doctor.hospital}</div>
            <div className="doctor-rating">
              <Rate allowHalf readOnly value={Math.floor(doctor.rating)} />
              <span className="rating-score">{doctor.rating}</span>
              <span className="rating-count">({doctor.ratingCount}人)</span>
            </div>
          </div>
        </div>

        {/* 快捷操作按钮 */}
        <div className="quick-actions">
          <div className="action-button" onClick={handleCall}>
            <div className="action-icon call-icon">📞</div>
            <div className="action-text">联系电话</div>
          </div>
          <div className="action-button" onClick={handleConsult}>
            <div className="action-icon consult-icon">💬</div>
            <div className="action-text">在线咨询</div>
          </div>
          <div className="action-button" onClick={handleShare}>
            <div className="action-icon share-icon">🔄</div>
            <div className="action-text">分享</div>
          </div>
        </div>
      </div>

      {/* 医生详细信息内容 */}
      <div className="doctor-detail-content">
        <Tabs
          activeKey={activeTab}
          onChange={setActiveTab}
          className="detail-tabs"
        >
          <Tabs.Tab title="医生简介" key="info">
            <div className="expertise-section">
              <h3 className="section-title">擅长领域</h3>
              <p className="expertise-content">{doctor.expertise}</p>
            </div>  
          </Tabs.Tab>  
          <Tabs.Tab title="患者评价" key="reviews">
            <div className="empty-placeholder"></div>
          </Tabs.Tab>
        </Tabs>  

        {activeTab === 'info' ? (
          <>
            {renderSchedule()}
            {renderReviews()}
          </>
        ) : (
          <div className="reviews-tab-content">
            {renderReviews()}
          </div>
        )}
      </div>

      {/* 底部预约区 */}
      <div className="booking-section">
        <div className="fee-info">
          <span className="fee-label">挂号费：</span>
          <span className="fee-amount">¥{doctor.fee.toFixed(2)}</span>
        </div>
        <Button color="primary" className="booking-button" onClick={handleBooking}>立即预约</Button>
      </div>
    </div>
  )
}

export default DoctorDetailPage;